<template>
  <el-dialog
    :visible.sync="modals"
    scrollable
    :title="title"
    class="order_box"
    width="1000"
    :footer-hide="true"
  >
    <el-card :bordered="false" shadow="never" class="i-table-no-border">
      <el-table
        :data="user_list"
        ref="table"
        class="mt25"
        :loading="loading"
        highlight-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="头像" min-width="100" #default="{row}">
          <div class="tabBox_img" style="width:80px;height:80px">
            <img v-lazy="row.thumb" />
          </div>
        </el-table-column>
        <el-table-column label="称呼" min-width="100" #default="{row}">{{row.title}}</el-table-column>
        <el-table-column label="电话" min-width="100" #default="{row}">{{row.phone}}</el-table-column>
        <el-table-column label="距离" min-width="100" #default="{row}">{{row.distance}}</el-table-column>
        <el-table-column label="经验" min-width="100" #default="{row}">{{row.workYear}}</el-table-column>
        <el-table-column label="操作" min-width="120" #default="{row}">
          <a @click="designate(row,'人员指派')">指派{{ row.name }}</a>
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script>
import { getOrderInfoApi, userRelaxDesignList, orderDesignateApi } from '@/api/onsite';
export default {
  name: 'orderDesignate',
  props: {
    orderId: Number,
  },
  data() {
    return {
      title: '人员指派',
      user_list: [],
      total: 0,
      modals: false,
      send_locked: false,
      userFrom: {
        itemId: 0,
        serviceTime: 0,
        latitude: 0,
        longitude: 0,
        uid: 0,
        // page:1,
        // limit:10
      },
      orderFrom: {},
    
      loading: false,
    };
  },
  methods: {
    // 订单详情
    userOrderList() {
      this.loading = true;
      // 获取订单信息
      getOrderInfoApi(this.orderId)
        .then(async (res) => {
          this.orderFrom = res;
      
          this.userFrom.cityId = res.cityId;
          this.userFrom.itemId = res.itemId;

          
          this.userFrom.serviceTime = res.bookTimeStr;
          this.userFrom.latitude = res.latitude;
          this.userFrom.longitude = res.longitude;
          this.userFrom.uid = res.uid;

          this.modals = true;
          // 获取服务人员信息
          userRelaxDesignList(this.userFrom)
            .then(async (res) => {
              this.user_list = res;
              this.loading = false;
            })
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });

      // 获取服务人员信息
    },
    cancel(name) {
      this.modals = false;
      this.$emit('clearId');
    },
    pageChange(index) {
      this.userFrom.page = index;
      this.userOrderList();
    },
    designate(row, title, num) {
      let that = this;
      that.$confirm(title, '确定指派' + row.title + '执行该订单吗？').then(() => {
        if (that.send_locked) {
          return that.$message.error('请勿重复指派');
        }
        that.send_locked = true;
        orderDesignateApi({ id: that.orderId, serviceStaffId: row.id })
          .then((res) => {
            that.send_locked = false;
            that.$message.success('指派成功');
            that.$emit('submitOk');
            setTimeout(function () {
              that.modals = false;
            }, 1500);
          })
          .catch((err) => {
            that.send_locked = false;
            that.$message.error(err.msg);
          });
      });
    },
  },
};
</script>

<style scoped lang="stylus">
.ivu-description-list-title {
  margin-bottom: 30px;
  color: #17233d;
  font-weight: bold;
  font-size: 14px;
}

.ivu-table th {
  background-color: #f8f8f9 !important;
}

.express_temp_id {
  position: relative;
}

.express_temp_id button {
  position: absolute;
  top: 50%;
  right: 110px;
  padding: 0;
  border: none;
  background: none;
  transform: translateY(-50%);
  color: #57a3f3;
}

.ivu-btn-text:focus {
  box-shadow: none;
}

.trips {
  color: #ccc;
}

.product-data {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-data .image {
  width: 50px !important;
  height: 50px !important;
}

.line2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
